<template>
  <a-input-group compact v-if="selectVal">
    <a-select
      :value="selectVal.select"
      @change="selectChange"
      :class="
        selectVal.select === disableVal ? 'hv-rotate-input-all' : 'hv-rotate-input-left'
      "
      dropdownClassName="hv-dark-select-dropdown"
    >
      <a-select-option
        :value="item.value"
        v-for="(item, index) in constList"
        :key="index"
      >
        {{ item.label }}
      </a-select-option>
    </a-select>

    <a-input-number
      :value="selectVal.value"
      @change="emitValue"
      :min="inputMin"
      :max="inputMax"
      :step="inputStep"
      size="small"
      class="hv-rotate-input-right"
      v-if="selectVal.select !== disableVal"
    />
  </a-input-group>
</template>

<script lang="ts" setup>
import type{ PropType } from "vue";

const props = defineProps({
  constList: {
    type: Object as PropType<any>,
    default: () => {
      return [];
    },
  },
  selectVal: {
    type: Object as PropType<{ select: string; value: string }>,
    default: () => null,
  },
  disableVal: {
    type: String,
    default: "",
  },
  inputMax: {
    type: Number,
    default: 100,
  },
  inputMin: {
    type: Number,
    default: 0,
  },
  inputStep: {
    type: Number,
    default: 1,
  },
});

const emit = defineEmits(["update:selectVal"]);

const selectChange = (select: string) => {
  emit("update:selectVal", {
    select,
    value: props.disableVal === select ? "" : props.selectVal.value || 0,
  });
};

const emitValue = (value: string) => {
  emit("update:selectVal", {
    select: props.selectVal.select,
    value,
  });
};
</script>

<style lang="less" scoped>
@import "./SelectAndCustomInput.less";
</style>
